<template>
  <div class="notification-demo">
    <h1>通知组件演示页面</h1>
    
    <div class="demo-description">
      <p>此页面用于演示优化后的通知组件，展示了多条通知的折叠效果。</p>
      <p>点击下方按钮添加不同类型的通知，然后观察通知栈的折叠/展开行为。</p>
    </div>
    
    <div class="demo-controls">
      <el-button type="primary" @click="addInfoNotification">添加信息通知</el-button>
      <el-button type="warning" @click="addWarningNotification">添加警告通知</el-button>
      <el-button type="success" @click="addSuccessNotification">添加成功通知</el-button>
      <el-button type="danger" @click="addErrorNotification">添加错误通知</el-button>
      <el-button @click="addMultipleNotifications">添加多条通知</el-button>
    </div>
    
    <div class="demo-info">
      <p>当前通知数量: {{ notificationCount }}</p>
      <p>点击通知项可以查看详情，点击右上角关闭按钮可以移除单条通知，点击"全部标记已读"可以清空所有通知。</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import notificationService from '../utils/notificationService'

const notificationCount = ref(0)

// 通知内容模板
const notificationTemplates = {
  info: [
    '系统维护通知：今晚23:00-次日凌晨2:00系统将进行例行维护',
    '最新科技资讯：人工智能技术取得重大突破',
    '欢迎使用设备管理系统，您可以在左侧菜单浏览各项功能',
    '数据同步完成，所有设备信息已更新'
  ],
  warning: [
    '您的账户存在异常登录，请及时修改密码',
    '设备使用率过高，建议适当调整负载',
    '部分数据同步失败，请检查网络连接后重试',
    '存储空间不足，建议清理不必要的文件'
  ],
  success: [
    '设备添加成功，已自动同步到云端',
    '批量操作已完成，共处理24台设备',
    '数据导入成功，新增56条记录',
    '配置更新成功，设备已应用最新设置'
  ],
  error: [
    '网络连接失败，请检查网络设置后重试',
    '设备连接超时，请确认设备状态',
    '操作权限不足，无法执行此操作',
    '数据处理错误，请稍后再试'
  ]
}

// 生成随机通知内容
const generateNotificationMessage = (type) => {
  const messages = notificationTemplates[type]
  return messages[Math.floor(Math.random() * messages.length)]
}

// 添加不同类型的通知
const addInfoNotification = () => {
  const message = generateNotificationMessage('info')
  notificationService.info(message)
  updateNotificationCount()
  ElMessage.success('信息通知已添加')
}

const addWarningNotification = () => {
  const message = generateNotificationMessage('warning')
  notificationService.warning(message)
  updateNotificationCount()
  ElMessage.success('警告通知已添加')
}

const addSuccessNotification = () => {
  const message = generateNotificationMessage('success')
  notificationService.success(message)
  updateNotificationCount()
  ElMessage.success('成功通知已添加')
}

const addErrorNotification = () => {
  const message = generateNotificationMessage('error')
  notificationService.error(message)
  updateNotificationCount()
  ElMessage.success('错误通知已添加')
}

// 批量添加通知
const addMultipleNotifications = () => {
  const types = ['info', 'warning', 'success', 'error']
  const count = Math.floor(Math.random() * 5) + 3 // 随机添加3-7条通知
  
  for (let i = 0; i < count; i++) {
    const randomType = types[Math.floor(Math.random() * types.length)]
    const message = generateNotificationMessage(randomType)
    // 为了避免通知ID冲突，稍微延迟添加
    setTimeout(() => {
      notificationService[randomType](message)
    }, i * 100)
  }
  
  setTimeout(() => {
    updateNotificationCount(count)
    ElMessage.success(`已成功添加${count}条通知`)
  }, count * 100)
}

// 更新通知数量显示
const updateNotificationCount = (increment = 1) => {
  notificationCount.value += increment
}

// 组件挂载时初始化
onMounted(() => {
  console.log('通知演示页面已挂载')
})
</script>

<style scoped>
.notification-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

h1 {
  color: #303133;
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
}

.demo-description {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  line-height: 1.6;
  color: #606266;
}

.demo-description p {
  margin: 10px 0;
}

.demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 30px;
  justify-content: center;
}

.demo-info {
  background-color: #ecf5ff;
  border-radius: 8px;
  padding: 20px;
  border-left: 4px solid #409eff;
  color: #606266;
}

.demo-info p {
  margin: 10px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .demo-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .demo-controls .el-button {
    width: 100%;
  }
  
  .notification-demo {
    padding: 20px 15px;
  }
  
  h1 {
    font-size: 24px;
  }
}
</style>